<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //
      let geyao = {
        name: "歌谣",
        age: 18,
      };

      function definereactive(data, key, val) {
        Object.defineProperty(data, key, {
          enumerable: true,
          configurable: true,
          get: function () {
            console.log("有人在读取我");
            return val;
          },
          set: function (newVal) {
            if (val == newVal) {
              console.log("我没有变化");
              return;
            }
            console.log("我变化了 我的天呀");
            val = newVal;
          
          },
        });

    
      }
      console.log("--------------1");
      console.log(definereactive(geyao, "age", 18));
      console.log("--------------1");
      console.log("--------------2");
      geyao.age = 19;
      console.log(geyao,"geyao")
      console.log("--------------2");
      console.log("--------------3");
      console.log(definereactive(geyao, "age"));
      console.log("--------------3");
    </script>
  </body>
</html>
